<div ng-controller="ActiveMQ.BrowseQueueController">
  <div class="row-fluid">
    <div class="span6">
      <div class="section-filter">
        <input class="search-query span12" type="text" ng-model="gridOptions.filterOptions.filterText"
               placeholder="Filter messages">
        <i class="icon-remove clickable"
              title="Clear filter"
              ng-click="gridOptions.filterOptions.filterText = ''"></i>
      </div>
    </div>
    <div class="span6">
      <div class="pull-right">
        <form class="form-inline">
          <button class="btn" ng-disabled="!gridOptions.selectedItems.length" ng-show="dlq" ng-click="retryMessages()"
                  hawtio-show object-name="{{workspace.selection.objectName}}" method-name="retryMessage" mode="remove"
                  title="Moves the dead letter queue message back to its original destination so it can be retried" data-placement="bottom">
            <i class="icon-reply"></i> Retry
          </button>
          <button class="btn" ng-disabled="gridOptions.selectedItems.length !== 1" ng-show="showButtons" ng-click="resendMessage()"
                  hawtio-show object-name="{{workspace.selection.objectName}}" method-name="sendTextMessage" mode="remove"
                  title="Edit the message to resend it" data-placement="bottom">
           <i class="icon-share-alt"></i> Resend
          </button>

          <button class="btn" ng-disabled="!gridOptions.selectedItems.length || queueNames.length === 0" ng-show="showButtons" ng-click="moveDialog = true"
                  hawtio-show object-name="{{workspace.selection.objectName}}" method-name="moveMessageTo" mode="remove"
                  title="Move the selected messages to another destination" data-placement="bottom">
            <i class="icon-share-alt"></i> Move
          </button>
          <button class="btn" ng-disabled="!gridOptions.selectedItems.length" ng-show="showButtons"
                  ng-click="deleteDialog = true"
                  hawtio-show object-name="{{workspace.selection.objectName}}" method-name="removeMessage" mode="remove"
                  title="Delete the selected messages">
            <i class="icon-remove"></i> Delete
          </button>
          <button class="btn" ng-click="refresh()"
                  hawtio-show object-name="{{workspace.selection.objectName}}" method-name="browse" mode="remove"
                  title="Refreshes the list of messages">
            <i class="icon-refresh"></i>
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="row-fluid">
    <div class="gridStyle" ng-grid="gridOptions"></div>
  </div>

  <!-- include the message body hidden so we can use it for the copy button -->
  <div ng-show="false">
    <p id="message_body">{{row.bodyText}}</p>
  </div>

  <div hawtio-slideout="showMessageDetails" title="{{row.JMSMessageID}}">
    <div class="dialog-body">

      <div class="row-fluid">
        <div class="pull-right">
          <form class="form-horizontal no-bottom-margin">

            <div class="btn-group"
                 hawtio-pager="messages"
                 on-index-change="selectRowIndex"
                 row-index="rowIndex"></div>

            <button class="btn" ng-disabled="!gridOptions.selectedItems.length || queueNames.length === 0" ng-show="showButtons" ng-click="moveDialog = true"
                    hawtio-show object-name="{{workspace.selection.objectName}}" method-name="moveMessageTo" mode="remove"
                    title="Move the selected messages to another destination" data-placement="bottom">
              <i class="icon-share-alt"></i> Move
            </button>
            
            <button class="btn"
                    zero-clipboard
                    data-clipboard-target="message_body" ng-show="showButtons"
                    title="Click to copy the message body to the clipboard">
              <i class="icon-copy"></i> Copy
            </button>

            <button class="btn btn-danger" ng-disabled="!gridOptions.selectedItems.length"
                    ng-click="deleteDialog = true" ng-show="showButtons"
                    hawtio-show object-name="{{workspace.selection.objectName}}" method-name="removeMessage" mode="remove"
                    title="Delete the selected messages">
              <i class="icon-remove"></i> Delete
            </button>

            <button class="btn" ng-click="showMessageDetails = !showMessageDetails" title="Close this dialog">
              <i class="icon-remove"></i> Close
            </button>

          </form>
        </div>
      </div>

      <div class="row-fluid">
        <div class="expandable closed">
          <div title="Headers" class="title">
            <i class="expandable-indicator"></i> Headers & Properties
          </div>
          <div class="expandable-body well">
            <table class="table table-condensed table-striped">
              <thead>
              <tr>
                <th>Header</th>
                <th>Value</th>
              </tr>
              </thead>
              <tbody ng-bind-html-unsafe="row.headerHtml"></tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="row-fluid">
        <div>Displaying body as <span ng-bind="row.textMode"></span></div>
        <div hawtio-editor="row.bodyText" read-only="true" mode='mode'></div>
      </div>

    </div>
  </div>

  <div hawtio-confirm-dialog="deleteDialog"
       ok-button-text="Delete"
       on-ok="deleteMessages()">
    <div class="dialog-body">
      <p>You are about to delete
        <ng-pluralize count="gridOptions.selectedItems.length"
                      when="{'1': 'a message!', 'other': '{} messages!'}">
        </ng-pluralize>
      </p>
      <p>This operation cannot be undone so please be careful.</p>
    </div>
  </div>

  <div hawtio-confirm-dialog="moveDialog"
       ok-button-text="Move"
       on-ok="moveMessages()">
    <div class="dialog-body">
      <p>Move
        <ng-pluralize count="gridOptions.selectedItems.length"
                      when="{'1': 'message', 'other': '{} messages'}"></ng-pluralize>
        to: <select ng-model="queueName" ng-options="qn for qn in queueNames" ng-init="queueName=queueNames[0]""></select>
      </p>
      <p>
        You cannot undo this operation.<br>
        Though after the move you can always move the
        <ng-pluralize count="gridOptions.selectedItems.length"
                      when="{'1': 'message', 'other': 'messages'}"></ng-pluralize>
        back again.
      </p>
    </div>
  </div>

</div>

